import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store'
import { h } from 'vue'
// 引入NProgress
import NProgress from 'nprogress'
// 引入nprogress样式文件
import 'nprogress/nprogress.css'

const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home')
const Login = () => import('@/views/login/Login')
const TopCategory = () => import('@/views/category')
const SubCategory = () => import('@/views/category/Sub')
const Goods = () => import('@/views/goods')
const Cart = () => import('@/views/cart')
const PayCheckout = () => import('@/views/member/pay/checkout')
const PayIndex = () => import('@/views/member/pay/index')
const MemberLayout = () => import('@/views/member/Layout')
const MemberHome = () => import('@/views/member/home')
const MemberOrder = () => import('@/views/member/order')
const MemberOrderDetail = () => import('@/views/member/order/detail')
const MemberHelp = () => import('@/views/member/help')
const MemberCollection = () => import('@/views/member/collection')
const CollectionGoods = () => import('@/views/member/collection/goods')
const CollectionShops = () => import('@/views/member/collection/shops')
const MemberInfo = () => import('@/views/member/info')
const MemberTrack = () => import('@/views/member/track')
const MemberCoupon = () => import('@/views/member/coupon')
const MemberEvaluate = () => import('@/views/member/evaluate')
const Register = () => import('@/views/register')

const routes = [
  {
    path: '/', 
    component: Layout,
    redirect: '/home',
    children:[
      {
        path: '/home',
        component: Home,
      },
      { 
        path: '/category/:id', 
        component: TopCategory 
      },
      { 
        path: '/category/sub/:id', 
        component: SubCategory 
      },
      { 
        path: '/product/:id', 
        component: Goods 
      },
      {
        path: '/cart', 
        component: Cart 
      },
      {
        path: '/member/checkout',
        component: PayCheckout
      },
      {
        path: '/member/pay',
        component: PayIndex
      },
      {
        path: '/member',
        component: MemberLayout,
        children:[
          {
            path: '/member',
            component: MemberHome
          },
          {
            path: '/member/order',
            // 创建一个RouterView容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberOrder },
              { path: ':id', component: MemberOrderDetail }
            ]
          },
          {
            path: '/member/help',
            component: MemberHelp
          },
          {
            path: '/member/evaluate',
            component: MemberEvaluate
          },
          {
            path: '/member/info',
            component: MemberInfo
          },
          {
            path: '/member/track',
            component: MemberTrack
          },
          {
            path: '/member/coupon',
            component: MemberCoupon
          },
          {
            path: '/member/collection',
            component: MemberCollection,
            children: [
              { 
                path: '/member/collection/goods', 
                component: CollectionGoods
              },
              {
                path: '/member/collection/shops',
                component: CollectionShops
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/register',
    component: Register
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior () {
    return { left: 0, top: 0 }
  },
  linkActiveClass: 'active'
})
// 前置导航守卫
router.beforeEach((to, from, next) => {
  NProgress.start()
  // 用户信息
  const { token } = store.state.user.profile
  // 跳转去member开头的地址却没有登录
  if (to.path.startsWith('/member') && !token) {
    next({ path: '/login', query: { redirectUrl: to.fullPath } })
  }
  next()
  NProgress.done()
})
export default router
